<template>
    <div class="app-main">
        <el-scrollbar :native="false" tag="section" style="height: 100%" :noresize="false">
            <transition name="fade-transform" mode="out-in">
                <el-card class="box-card">
                    <keep-alive :include="$store.state.cachedViews">
                        <router-view :key="$route.path"/>
                    </keep-alive>
                </el-card>
            </transition>
        </el-scrollbar>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";

    @Component
    export default class AppMain extends Vue {

    }
</script>

<style scoped lang="scss">
    .app-main {
        /* 90= header + footer  50 +40 */
        height: calc(100vh - 90px);
        width: 100%;
        position: relative;
        overflow: hidden;

        .box-card {
            margin: 5px;
            min-height: calc(100vh - 110px);
        }
    }

    .fixed-header + .app-main {
        padding-top: 50px;
    }

    .hasTagsView {
        .app-main {
            /* 84 = navbar + tags-view + footer = 50 + 34 +40 */
            height: calc(100vh - 124px);

            .box-card {
                margin: 5px;
                min-height: calc(100vh - 145px);
            }
        }

        .fixed-header + .app-main {
            padding-top: 84px;
        }
    }

</style>

